JQuery的應用有非常多種，概念就是當觸發條件達成時，我要做些甚麼，例如:滑鼠單擊一下，隱藏的選單跑出來，或是滾動網頁到下方時，蓋板廣告跑出來。都是JQuery的應用!

例子:當我點abox時bbox會隱藏起來。

建立兩個寬高一樣，背景顏色不同的方塊。

    <style>
        .abox{
            width: 200px;
            height: 200px;
            display: inline-block;
            background-color: green;
        }
        .bbox{
            width: 200px;
            height: 200px;
            display: inline-block;
            background-color:red;
        }
    </style>
    
    <div class="abox">abox</div>
    <div class="bbox">bbox</div>

接下來就是撰寫我們JQuery的部分!點到abox時bbox要隱藏住。

    <script>
        $(document).ready(function(){
            // 要執行的動作
            $('.abox').click(function(){
                $('.bbox').hide();
            })
        })

    </script>

當點下去後bbox就會消失，但是這樣子，我想要按一下他能夠再回來要怎麼做呢?
這樣的話就要把hide屬性改成toggle。

$(document).ready(function(){
            // 要執行的動作
            $('.abox').click(function(){
                $('.bbox').toggle();
            })
        })

那如果我又不想要單擊，我想要點兩下他才會隱藏怎麼辦呢?我們就把click改成dblclick

        $(document).ready(function(){
            // 要執行的動作
            $('.abox').dblclick(function(){
                $('.bbox').toggle();
            })
        })

是不是比想像中簡單很多呢?

這就完成像我們手機很常用到的選單，按一個按鈕跳出分類的應用，是不是十分方便!而像是JQuery還有許多應用，可以在JQuery的事件event裡面去看該怎麼用。

像是光滑鼠事件就有分許多的類型!也是我們比較常用到的。

今天的JQuery應用就講到這拉!改謝大家的支持。

參考資料:https://www.youtube.com/watch?v=CDO8AkK2HnE&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=27